<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿</title>
  <link rel="stylesheet" href="../css/orders.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
  <!-- 引入header相关的 -->
  <link rel="stylesheet" href="../css/header.css">
  <script src="../js/header.js"></script>
</head>

<body>
  <!-- 头部导航 -->
  <header>
    <div class="w">
      <ul>
        <li><a href="javascript:;">请先登录</a></li>
        <li></li>
        <li><a href="javascript:;">免费注册</a></li>
        <li></li>
        <li><a href="../html/orders.html">我的订单</a></li>
        <li></li>
        <li><a href="../html/personal.html">会员中心</a></li>
        <li></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li></li>
        <li><a href="javascript:;">在线客服</a></li>
        <li></li>
        <li><a href="javascript:;"><i class="iconfont icon-shouji"></i> 手机版</a></li>
      </ul>
    </div>
  </header>
  <!-- 导航栏 -->
  <nav>
    <div class="w">
      <h1 class="logo">
        <a href="javascript:;">
          小兔鲜儿
        </a>
      </h1>
      <ul>
        <li><a href="../html/index.html">首页</a></li>
        <li><a href="../html/classify.html">居家</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">服饰</a></li>
        <li><a href="javascript:;">母婴</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">严选</a></li>
        <li><a href="javascript:;">数码</a></li>
        <li><a href="javascript:;">运动</a></li>
        <li><a href="javascript:;">杂项</a></li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" name="search" id="inp_search" placeholder="搜一搜">
      </div>
      <div class="shoppingCart">
        <i class="iconfont icon-i-shoping-car"></i>
        <span class="showNums"><i>0</i></span>
      </div>
    </div>
  </nav>
  <!-- 滚动才显示的导航栏开始 -->
  <nav class="slide_nav">
    <div class="w">
      <h1 class="logo">
        <a href="javascript:;">
          小兔鲜儿
        </a>
      </h1>
      <ul>
        <li><a href="../html/index.html">首页</a></li>
        <li><a href="../html/classify.html">居家</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">服饰</a></li>
        <li><a href="javascript:;">母婴</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">严选</a></li>
        <li><a href="javascript:;">数码</a></li>
        <li><a href="javascript:;">运动</a></li>
        <li><a href="javascript:;">杂项</a></li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" name="search" id="inp_search" placeholder="搜一搜">
      </div>
      <div class="shoppingCart">
        <i class="iconfont icon-i-shoping-car"></i>
        <span class="showNums"><i>0</i></span>
      </div>
    </div>
  </nav>
  <!-- 滚动才显示的导航栏结束 -->
  <main>
    <!-- 版心 -->
    <div class="w">

      <!-- 左侧导航栏 -->
      <div class="nav">
        <h4 class="box">我的账户</h4>
        <div>
          <a href="../html/personal.html">个人中心</a>
          <a href="">消息通知</a>
          <a href="">个人信息</a>
          <a href="">安全设置</a>
          <a href="">地址管理</a>
          <a href="">我的积分</a>
          <a href="">我的足迹</a>
          <a href="">邀请有礼</a>
          <a href="">幸运抽奖</a>
        </div>
        <h4 class="box">交易管理</h4>
        <div>
          <a href="" class="ture">· 我的订单</a>
          <a href="">优惠券</a>
          <a href="">礼品卡</a>
          <a href="">评价晒单</a>
          <a href="">售后服务</a>
        </div>
        <h4 class="box">我的收藏</h4>
        <div>
          <a href="">收藏的商品</a>
          <a href="">收藏的专题</a>
          <a href="">关注的品牌</a>
        </div>
        <h4 class="box">帮助中心</h4>
        <div>
          <a href="">帮助中心</a>
          <a href="">在线客服</a>
        </div>
      </div>


      <!-- 订单详情 -->
      <div class="orders">
        <!-- 提示导航 -->
        <div class="header">
          <p>
            <a href="">首页导航</a>
            <i class="iconfont icon-arrow-right"></i>
            <a href="">我的订单</a>
          </p>
        </div>

        <!-- 订单内容 -->
        <div class="ordersbox">
          <!-- 单个订单内容 -->
          <div class="box">

            <!-- 下单时间、订单号 -->
            <div class="box1">
              <span>下单时间：2022-02-07</span>
              <span>订单号：62205697599</span>
              <span class="box1last">
                <!-- 图标 -->
                <i class="iconfont icon-shizhong"></i>
                <!-- 付款倒计时 -->
                <span>付款倒计时：28分20秒</span>
              </span>
            </div>

            <!-- 订单商品信息 -->
            <div class="box2">
              <!-- 一、商品图片 -->
              <div class="shopbox1">
                <ul>
                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>

                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 二、付款 ：待付款-->
              <div class="shopbox2">
                <p>待付款</p>
              </div>

              <!-- 三、金额 -->
              <div class="shopbox3">
                <p>￥19.00</p>
                <p>（含运费：￥10.00）</p>
                <p>在线支付</p>
              </div>

              <!-- 四、支付状态：立即付款、、、、 -->
              <div class="shopbox4">
                <button>立即付款</button>
                <a href="">查看详情</a>
                <a href="">取消订单</a>
              </div>

            </div>

          </div>

          <div class="box">

            <!-- 下单时间、订单号 -->
            <div class="box1">
              <span>下单时间：2022-02-07</span>
              <span>订单号：62205697599</span>
              <span class="box1last">
                <!-- 图标 -->
                <i class="iconfont icon-shizhong"></i>
                <!-- 付款倒计时 -->
                <span>付款倒计时：28分20秒</span>
              </span>
            </div>

            <!-- 订单商品信息 -->
            <div class="box2">
              <!-- 一、商品图片 -->
              <div class="shopbox1">
                <ul>
                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>

                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 二、付款 ：待付款-->
              <div class="shopbox2">
                <p>待付款</p>
              </div>

              <!-- 三、金额 -->
              <div class="shopbox3">
                <p>￥19.00</p>
                <p>（含运费：￥10.00）</p>
                <p>在线支付</p>
              </div>

              <!-- 四、支付状态：立即付款、、、、 -->
              <div class="shopbox4">
                <button>立即付款</button>
                <a href="">查看详情</a>
                <a href="">取消订单</a>
              </div>

            </div>

          </div>

          <div class="box">

            <!-- 下单时间、订单号 -->
            <div class="box1">
              <span>下单时间：2022-02-07</span>
              <span>订单号：62205697599</span>
              <span class="box1last">
                <!-- 图标 -->
                <i class="iconfont icon-shizhong"></i>
                <!-- 付款倒计时 -->
                <span>付款倒计时：28分20秒</span>
              </span>
            </div>

            <!-- 订单商品信息 -->
            <div class="box2">
              <!-- 一、商品图片 -->
              <div class="shopbox1">
                <ul>
                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>

                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 二、付款 ：待付款-->
              <div class="shopbox2">
                <p>待付款</p>
              </div>

              <!-- 三、金额 -->
              <div class="shopbox3">
                <p>￥19.00</p>
                <p>（含运费：￥10.00）</p>
                <p>在线支付</p>
              </div>

              <!-- 四、支付状态：立即付款、、、、 -->
              <div class="shopbox4">
                <button>立即付款</button>
                <a href="">查看详情</a>
                <a href="">取消订单</a>
              </div>

            </div>

          </div>

          <div class="box">

            <!-- 下单时间、订单号 -->
            <div class="box1">
              <span>下单时间：2022-02-07</span>
              <span>订单号：62205697599</span>
              <span class="box1last">
                <!-- 图标 -->
                <i class="iconfont icon-shizhong"></i>
                <!-- 付款倒计时 -->
                <span>付款倒计时：28分20秒</span>
              </span>
            </div>

            <!-- 订单商品信息 -->
            <div class="box2">
              <!-- 一、商品图片 -->
              <div class="shopbox1">
                <ul>
                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>

                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 二、付款 ：待付款-->
              <div class="shopbox2">
                <p>待付款</p>
              </div>

              <!-- 三、金额 -->
              <div class="shopbox3">
                <p>￥19.00</p>
                <p>（含运费：￥10.00）</p>
                <p>在线支付</p>
              </div>

              <!-- 四、支付状态：立即付款、、、、 -->
              <div class="shopbox4">
                <button>立即付款</button>
                <a href="">查看详情</a>
                <a href="">取消订单</a>
              </div>

            </div>

          </div>

          <div class="box">

            <!-- 下单时间、订单号 -->
            <div class="box1">
              <span>下单时间：2022-02-07</span>
              <span>订单号：62205697599</span>
              <span class="box1last">
                <!-- 图标 -->
                <i class="iconfont icon-shizhong"></i>
                <!-- 付款倒计时 -->
                <span>付款倒计时：28分20秒</span>
              </span>
            </div>

            <!-- 订单商品信息 -->
            <div class="box2">
              <!-- 一、商品图片 -->
              <div class="shopbox1">
                <ul>
                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>

                  <li>
                    <!-- 图片 -->
                    <a href=""><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png"
                        alt=""></a>
                    <!-- 商品文字信息 -->
                    <div class="text">
                      <h1>原创设计一体化机身，精致迷你破壁机350ml</h1>
                      <p>
                        <span>颜色：绿色</span>
                        <span>尺寸：18英寸</span>
                      </p>
                    </div>
                    <!-- 单价 -->
                    <div class="unitPrice">
                      <p>￥9.50</p>
                    </div>
                    <!-- 数量 -->
                    <div class="quantity">
                      <p>X1</p>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 二、付款 ：待付款-->
              <div class="shopbox2">
                <p>待付款</p>
              </div>

              <!-- 三、金额 -->
              <div class="shopbox3">
                <p>￥19.00</p>
                <p>（含运费：￥10.00）</p>
                <p>在线支付</p>
              </div>

              <!-- 四、支付状态：立即付款、、、、 -->
              <div class="shopbox4">
                <button>立即付款</button>
                <a href="">查看详情</a>
                <a href="">取消订单</a>
              </div>

            </div>

          </div>
        </div>
      </div>



    </div>
  </main>
  <!-- 商品数据需要js写 ordersbox -->
  <!-- 尾部关于我们 -->
  <footer>
    <!-- 尾部上面 -->
    <div class="footer_top w">
      <!-- 客户服务 -->
      <div class="kehu">
        <div>客户服务</div>
        <div>
          <span><i class="iconfont icon-a-4_huaban1"></i>在线客服</span>
          <span><i class="iconfont icon-question"></i>问题反馈</span>
        </div>
      </div>
      <!-- 关注我们 -->
      <div class="aboutus">
        <div>关注我们</div>
        <div>
          <span><i class="iconfont icon-weixin"></i>公众号</span>
          <span><i class="iconfont icon-xinlangweibo"></i>微博</span>
        </div>
      </div>
      <!-- 下载app -->
      <div class="download_app">
        <div>下载APP</div>
        <div>
          <span><img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt=""></span>
          <div class="btn_download">
            <i>扫描二维码立马下载app</i>
            <button>下载页面</button>
          </div>
        </div>
        <div>
        </div>
      </div>
      <!-- 服务热线 -->
      <div class="rexian">
        <div>服务热线</div>
        <div>
          <div>400-0000-000</div>
          <div>周一至周日 8:00-18:00</div>
        </div>
      </div>
    </div>
    <!-- 尾部下面 -->
    <div class="footer_bottom">
      <div class="w">
        <div class="footerUp">
          <div><i class="iconfont icon-xiangzi"></i><span>价格亲民</span></div>
          <div><i class="iconfont icon-dianzan"></i><span>物流快捷</span></div>
          <div><i class="iconfont icon-huoche"></i><span>品质新鲜</span></div>
        </div>
        <div class="footerBottom">
          <ul>
            <li>关于我们</li>
            <li></li>
            <li>帮助中心</li>
            <li></li>
            <li>售后服务</li>
            <li></li>
            <li>配送与验收</li>
            <li></li>
            <li>商务合作</li>
            <li></li>
            <li>搜索推荐</li>
            <li></li>
            <li>友情链接</li>
          </ul>
          <div>CopyRight &copy; 小兔鲜儿</div>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>